<template>
  <div class="flex flex-col gap-y-2">
    <div class="flex flex-justify-between card">
      <div class="flex gap-2">
        <el-input v-model="queryClinicTypeReq.queryText" class="w-[200px]"></el-input>
        <el-button @click="query">查询</el-button>
        <el-button @click="addItem">添加</el-button>
        <el-button @click="save">保存</el-button>
      </div>
      <div>
        <el-button @click="deptAppendPriceRef.display()">科室附加费</el-button>
      </div>
    </div>

    <div class="flex flex-col gap-y-2 card">
      <vxe-table
        ref="tableRef"
        :data="queryClinicTypeRes.data"
        :height="tableHeight"
        :edit-config="{
          trigger: 'dblclick',
          mode: 'cell',
        }"
      >
        <vxe-column type="seq" width="70"></vxe-column>
        <vxe-column field="clinicType" title="号类" width="240" :edit-render="{}">
          <template #edit="{ row }">
            <el-input v-if="row.editStatus" v-model="row.clinicType" />
            <span v-else>{{ row.clinicType }}</span>
          </template>
        </vxe-column>
        <vxe-column title="操作" width="260">
          <template #default="{ row }">
            <el-button size="small" type="danger" @click="removeRow(row)">删除</el-button>
            <el-button v-show="!row.editStatus" size="small" @click="clinicTypeSetttingRef.display(row.clinicType)">
              费用维护
            </el-button>
            <el-button v-show="!row.editStatus" size="small" @click="clinicTypeChargeRef.display(row.clinicType)">
              金额计算方式
            </el-button>
          </template>
        </vxe-column>
      </vxe-table>

      <el-pagination
        v-model:current-page="queryClinicTypeReq.currentPage"
        v-model:page-size="queryClinicTypeReq.pageSize"
        :page-sizes="[20, 30, 40, 50]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryClinicTypeRes.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <DeptAppendPrice ref="deptAppendPriceRef" />
    <ClinicTypeSetting ref="clinicTypeSetttingRef" />
    <ClinicTypeCharge ref="clinicTypeChargeRef" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { VxeTableInstance, VxeTablePropTypes } from 'vxe-table'
import { ElMessageBox, ElMessage } from 'element-plus'
import type { ClinicType } from '@/api/register/base'
import type { DictDataPaginationReq } from '@/api/system/dict'
import { DictAPIs, EnumDictName } from '@/api/system/dict'
import type { PaginationRes } from '@/api/common'
import DeptAppendPrice from './components/DeptAppendPrice.vue'
import ClinicTypeSetting from './components/ClinicTypeSetting.vue'
import ClinicTypeCharge from './components/ClinicTypeCharge.vue'

const tableRef = ref<VxeTableInstance<ClinicType>>()
const deptAppendPriceRef = ref<any>()
const clinicTypeSetttingRef = ref<any>()
const clinicTypeChargeRef = ref<any>()

/** 表格高度 */
const tableHeight = computed(() => window.innerHeight - 252 - 60)

/** 表分页结果 */
var queryClinicTypeRes = ref<PaginationRes<ClinicType>>({
  total: 0,
  data: [],
})

/** 表分页请求 */
var queryClinicTypeReq = ref<DictDataPaginationReq>({
  dictName: EnumDictName.挂号号类,
  queryText: '',
  currentPage: 1,
  pageSize: 20,
  isPagination: true,
})

/** 查找 */
async function query() {
  queryClinicTypeRes.value = await DictAPIs.getDataByPagination<ClinicType>(queryClinicTypeReq.value)
}

/** 页大小改变 */
const handleSizeChange = (val: number) => {
  queryClinicTypeReq.value.pageSize = val
}

/** 当前页号 */
const handleCurrentChange = (val: number) => {
  queryClinicTypeReq.value.currentPage = val
}

/** 监控 */
watch(
  [
    () => queryClinicTypeReq.value.currentPage,
    () => queryClinicTypeReq.value.pageSize,
    () => queryClinicTypeReq.value.queryText,
  ],
  () => {
    query()
  }
)

/**增加项目 */
async function addItem() {
  const $table = tableRef.value
  if ($table) {
    const { row: newRow } = await $table.insert({ editStatus: true })
    // 激活不自动聚焦
    $table.setEditRow(newRow)
  }
}

/**删除项目 */
async function removeRow(row: ClinicType) {
  const $table = tableRef.value
  if ($table) {
    await $table.remove(row)
  }
}

/**保存项目 */
function save() {
  ElMessageBox.confirm('是否保存数据?', '系统提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    ElMessage({
      type: 'success',
      message: '保存成功',
    })
  })
}
</script>

<style lang="scss" scoped></style>
